<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令全局注册</title>
</head>
<body>
<div id="app">
    <input type="text" v-ooo>
    <p v-pin:[nnn]="200">距离顶部200px</p>
    <button @click="mmm">距离左部200px</button>
</div>
<script src="../vue.js"></script>
<script>
    Vue.directive('pin',{
        bind:function (el,binding,vNode) {
            el.style.position="fixed";
            console.log(binding)
            var content = binding.arg == 'left'?'left':'top';
            el.style[content] = binding.value + 'px';
        },
        update:function (el,binding,vNode) {
            el.style.position = 'fixed';
            var content = binding.arg == 'left'?'left':'top';
            el.style[content] = binding.value + 'px';
        }
    })
    Vue.directive('ooo',{
        inserted(el){
            el.focus();//页面刷新时自动聚焦
        }
    })
    new Vue({
        el:'#app',
        data(){
            return {
                nnn:'top'
            }
        },
        methods:{
            mmm(){
                this.nnn = 'left';
            }
        }
    })
</script>
</body>
</html>